<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}菜单`"
    :width="840"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading" style="padding: 0 100px">
      <a-form :form="form" v-bind="formLayout">
        <a-row>
          <a-col>
            <a-form-item label="主键ID" v-show="false">
              <a-input v-decorator="['id']" />
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="匹配字符">
              <a-input v-decorator="['web_route', { initialValue: '' }]" placeholder="请填写菜单匹配字符" />
            </a-form-item>
          </a-col>
          <a-col>
            <a-form-item label="菜单名称">
              <a-input v-decorator="['name']" placeholder="请填写菜单名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="父级菜单" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
              <a-select v-decorator="['pid']" placeholder="请选择父级菜单" :allowClear="true">
                <a-select-option :value="item.id" v-for="item in fristMenuList" :key="item.id">{{
                  item.name
                }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="是否显示" :labelCol="{ span: 8, offset: 2 }" :wrapperCol="{ span: 14 }">
              <a-select v-decorator="['is_show', { initialValue: 1 }]" placeholder="请选择是否显示">
                <a-select-option :value="1">显示</a-select-option>
                <a-select-option :value="0">不显示</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="操作方法">
              <a-select
                v-decorator="['action', { initialValue: [] }]"
                mode="multiple"
                style="width: 100%"
                placeholder="请选择操作方法"
              >
                <a-select-option :value="item" v-for="item in menuAction" :key="item">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="菜单地址">
              <a-input v-decorator="['url', { initialValue: '' }]" placeholder="请填写菜单地址" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="图标" :labelCol="{ span: 8 }" :wrapperCol="{ span: 14 }">
              <a-input v-decorator="['icon', { initialValue: '' }]" placeholder="请填写图标">
                <a-icon slot="addonAfter" type="setting" @click.native="showIconSeletor" class="icon-setting" />
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="权重" :labelCol="{ span: 8, offset: 2 }" :wrapperCol="{ span: 14 }">
              <a-input v-decorator="['weight', { initialValue: '' }]" placeholder="请填写权重" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <icon-selector-modal :value="form.getFieldValue('icon')" @change="selectIconChange" ref="iconSelectorModal" />
  </a-modal>
</template>

<script>
import IconSelectorModal from '@/components/IconSelectorModal'
import formModalMixin from '@/mixins/formModalMixin'
import { getFirstMenuList, menuAction, menuAdd, menuEdit } from '@/api/menu'
const fields = ['name', 'id', 'pid', 'icon', 'url', 'weight', 'action', 'web_route', 'is_show']
export default {
  mixins: [formModalMixin],
  components: {
    IconSelectorModal
  },
  data () {
    this.fields = fields
    this.editAction = menuEdit
    this.addAction = menuAdd
    return {
      formLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      fristMenuList: [],
      menuAction: []
    }
  },
  created () {
    getFirstMenuList().then(res => {
      this.fristMenuList = res.data
    })
    menuAction().then(res => {
      this.menuAction = res.data
    })
  },
  methods: {
    selectIconChange (icon) {
      this.form.setFieldsValue({ icon })
      console.log(this.form.getFieldValue('icon'))
    },
    showIconSeletor () {
      this.$refs.iconSelectorModal.show()
    },
    watchBefore (model) {
      if (model.pid === 0) delete model.pid
    },
    handleOkBefore (values) {
      const params = { ...values }
      if (!params.pid) params.pid = 0
      const action = params.action
      if (action instanceof Array) {
        params.action = action.join('\n')
      }
      return params
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.icon-setting {
  cursor: pointer;
}
</style>
